<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
          content="A layout example with a side menu that hides on mobile, just like the Pure website.">
    <title>Source of creation Laravel</title>
    <meta name="description" content="Life can not be like cooking, materials are complete before the pot."/>
    <!-- FavIcon -->
    <link rel="icon" type="image/png" href="./image/bitbug_favicon.ico">
    <link rel="stylesheet" href="__static__/css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-"
          crossorigin="anonymous">
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="__static__/css/layouts/side-menu.css">
    <!--<![endif]-->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>


<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="#">Apple House</a>

            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="{:url('index/index')}" class="pure-menu-link">主页</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">用户</a></li>
                <li class="pure-menu-item menu-item-divided pure-menu-selected"><a href="#"
                                                                                   class="pure-menu-link">文章</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">订单</a></li>
            </ul>
        </div>
    </div>

    <div id="main">
        <div class="top-user">
            <div class="user_init"><a href="{:url('login/loginout')}">退出</a></div>
        </div>
        <div class="headler">
            <a class="pure-button pure-button-primary"
               onclick="document.getElementById('posite').style.display = 'block';">添加</a>
        </div>

        <div class="contents">
            <table class="pure-table pure-table-horizontal">
                <thead>
                <tr>
                    <th class="h1">id</th>
                    <th class="h2">名称</th>
                    <th class="h3">简介</th>
                    <th class="h4">图片</th>
                    <th class="h5">操作</th>
                </tr>
                </thead>
                <!--内容-->
                <tbody>
                {volist name="topic" id="value"}
                <tr>
                    <td>{$value.id}</td>
                    <td>{$value.name}</td>
                    <td>{$value.desc}</td>
                    <td>{$value.img}</td>
                    <td>
                        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
                            <a href="#" id="menuLink1" class="pure-menu-link">操作</a>
                            <ul class="pure-menu-children">
                                <li class="pure-menu-item"><a href="#" class="pure-menu-link">预览</a></li>
                                <li class="pure-menu-item"><a
                                        onclick="document.getElementById('delect').style.display = 'block';"
                                        class="pure-menu-link">编辑</a></li>
                                <li class="pure-menu-item"><a href="#" class="pure-menu-link">删除</a></li>
                            </ul>
                        </li>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
            <!-- 分页器 -->
            <div style="margin-left: 480px ">
                {$topic->render()}
            </div>

        </div>
    </div>
</div>

<!--弹窗
-->
<div class="posite" id="posite">

    <form class="pure-form pure-form-stacked" method="post" action="">
        <fieldset>
            <legend>添加</legend>

            <div class="pure-g">
                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="first-name">名称</label>
                    <input id="first-name" class="pure-u-23-24" type="text" name="name">
                </div>

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="last-name">简介</label>
                    <input id="last-name" class="pure-u-23-24" type="text" name="desc">
                </div>

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="photo">图片</label>
                    <input id="photo" class="pure-u-23-24" type="file" name="img">
                </div>

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="state">父级</label>
                    <select id="pname" class="pure-input-s" name="pname" onchange="topic_ajax()">
                        <option value=''>请选择</option>
                        {volist name='pc' id='value'}
                        <option value='{$value.id}'>{$value.name}</option>
                        {/volist}
                    </select>
                    <select id="poname" name="poname" class="pure-input-s" onchange="topic_ajaxx()">
                    </select>
                    <select id="ptname" class="pure-input-s">
                    </select>
                </div>
            </div>

            <button type="submit" class="pure-button pure-button-primary" >提交</button>
            <a class="pure-button pure-button-primary"
               onclick="document.getElementById('posite').style.display = 'none';">取消</a>
        </fieldset>
    </form>

</div>
<div class="posite" id="delect">

    <form class="pure-form pure-form-stacked">
        <fieldset>
            <legend>编辑</legend>

            <div class="pure-g">
                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="first-name">名称</label>
                    <input id="first-name" class="pure-u-23-24" type="text">
                </div>

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="last-name">简介</label>
                    <input id="last-name" class="pure-u-23-24" type="text">
                </div>

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="photo">图片</label>
                    <input id="photo" class="pure-u-23-24" type="file">
                </div>

                <div class="pure-u-1 pure-u-md-1-3">
                    <label for="state">父级</label>
                    <select id="state" class="pure-input-s">
                        <option>天文</option>
                        <option>地理</option>
                        <option>化学</option>
                    </select>
                    <select id="state" class="pure-input-s">
                        <option>银河系</option>
                        <option>仙女星系</option>
                        <option>小熊星系</option>
                    </select>
                    <select id="state" class="pure-input-s">
                        <option>太阳</option>
                        <option>地球</option>
                        <option>冥王星</option>
                    </select>
                </div>
            </div>


            <button type="submit" class="pure-button pure-button-primary">提交</button>
            <a class="pure-button pure-button-primary"
               onclick="document.getElementById('delect').style.display = 'none';">取消</a>
        </fieldset>
    </form>

</div>



<script src="__static__/js/ui.js"></script>
<script src="__static__/js/topic_ajax.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


</body>
</html>
